/**
 * Created by xuxiaoqi on 2017/9/18.
 */

import React, {Component} from 'react'
import {Upload, Button, Icon, message, Table, Col} from 'antd'
import {fetchPost} from '../../../utils/request'
import {origin} from '../../../utils/config'
import auth from '../../../services/auth'
import styles from './Index.less'
import Search from '../../common/components/Search'

class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      fileList: [],
      list: [],
      searchParams: {
        list: [
          {
            name: 'Thaw Type',
            type: 'select',
            key: 'frozenCodeList',
            className: 'pr20',
            values: [{value: '', name: 'Please Choose'}]
          },
          {
            name: 'User Type',
            type: 'select',
            key: 'appCodeList',
            className: 'pr20',
            values: [{value: '', name: 'Please Choose'}]
          }
        ],
        api: '/user/get/appCode/and/frozenCode'
      }
    }
  }

  componentDidMount() {

  }

  handleUpload(info) {
    if (info) {
      let fileList = info.fileList
      fileList = fileList.slice(-1)
      this.setState({fileList})
      if (info.file.status === 'done') {
        let code = info.file.response.code
        if (code === 0) {
          message.success('Thawing succeeded')
          this.setState({
            list: info.file.response.data.userList
          })
        } else {
          this.setState({
            list: []
          })
          message.error(info.file.response.msg)
        }
      }
    }
  }

  changeParams(params) {
    console.log(params, 'params')
    this.setState({
      frozenCode: params.frozenCodeList,
      appCode: params.appCodeList
    })
  }

  beforeUpload(file) {
    if (!this.state.frozenCode || !this.state.appCode) {
      message.error('Please select the defrosting type and product type first!')
      return false
    }
  }

  render() {
    const accessToken = auth.getToken()

    const columns = [
      {
        title: 'Mobile',
        dataIndex: 'mobile',
        key: 'mobile',
        render: (text, record) => (
          <span className='clr-error' style={{color: 'red'}}>{record.mobile}</span>
        )
      }
    ]
    let headers = {
      'productCategory': sessionStorage.getItem("productCategory"),
      'accessToken': accessToken
    }
    let header = JSON.stringify(headers)
    const uploadProps = {
      action: `${origin}/user/${this.state.frozenCode}/${this.state.appCode}/thawuser/by/mobile`,
      onChange: this.handleUpload.bind(this),
      headers: headers,

      defaultFileList: [...this.state.fileList],
      fileList: this.state.fileList,
      name: 'mFile'
    }
    return (
      <div className={styles.wrapper}>
        <div className={styles.titleWrap}>
          <span className={styles.title}><Icon type='tag'/>Thaw User</span>
          <Search searchParams={this.state.searchParams} changeParams={(params) => this.changeParams(params)}/>
          <span className='ml10'>
            <Upload {...uploadProps} beforeUpload={(file) => this.beforeUpload(file)}>
              <Button>
                <Icon type='upload'/> Upload
              </Button>
            </Upload>
          </span>
        </div>

        <Col span={12} className={styles.failContent}>
          <Table
            title={() => 'Thaw Failure List'}
            bordered
            pagination={false}
            dataSource={this.state.list}
            columns={columns}
            style={{background: '#FFFFFF'}}
          />
        </Col>
      </div>

    )
  }
}

export default Index
